<template>
    <view class="meal-detail-page">
        <!-- 套餐图片 -->
        <view class="header-swiper">
            <image :src="currentMeal.image" mode="aspectFill" class="meal-image"></image>

            <!-- 返回按钮 -->
            <view class="back-btn" @click="goBack">
                <u-icon name="arrow-left" color="#fff" size="24"></u-icon>
            </view>
        </view>

        <!-- 价格信息 -->
        <view class="price-section">
            <view class="price-info">
                <view class="price-header">
                    <text class="current-price">¥{{ currentMeal.currentPrice }}</text>
                    <view class="price-comparison">
                        <text class="equal-text">=</text>
                        <text class="original-price">¥{{ currentMeal.originalPrice }}</text>
                        <text class="minus-text">-</text>
                        <text class="discount-amount">¥{{ currentMeal.discount }}</text>
                        <text class="minus-text">-</text>
                        <text class="voucher-amount">¥{{ currentMeal.voucher }}</text>
                        <text class="minus-text">-</text>
                        <text class="final-voucher">¥{{ currentMeal.finalDiscount }}</text>
                    </view>
                </view>
                <view class="discount-tags">
                    <view class="discount-tag god">神券 立减{{ currentMeal.godVoucher }}</view>
                    <view class="discount-tag limited">限时优惠 立减{{ currentMeal.limitedDiscount }}</view>
                    <text class="all-discounts">全部优惠 ></text>
                </view>
            </view>
        </view>

        <!-- 限制说明 -->
        <view class="restriction-info">
            <view class="restriction-item">
                <u-icon name="info-circle" size="16" color="#fa436a"></u-icon>
                <text>【周四限量】您有4张无门槛券未领</text>
                <u-icon name="arrow-right" size="12" color="#909399"></u-icon>
            </view>
        </view>

        <!-- 套餐标题 -->
        <view class="meal-title">
            <text class="title-text">聚客推荐 3～4人❤️大猪猪烤肉-优选烤肉套餐❤️</text>
        </view>

        <!-- 评价信息 -->
        <view class="rating-section">
            <view class="rating-info">
                <u-icon name="thumb-up-fill" size="16" color="#52c41a"></u-icon>
                <text class="rating-text">90%好评 610条评价</text>
                <u-icon name="arrow-right" size="12" color="#909399"></u-icon>
            </view>
            <view class="additional-info">
                <text class="info-text">回头客1千+ 近一周销量310+</text>
            </view>
        </view>

        <!-- 限制和保障 -->
        <view class="policy-section">
            <view class="policy-item">
                <text class="policy-label">限制</text>
                <text class="policy-content">商品每桌限用1张券</text>
            </view>
            <view class="policy-item">
                <text class="policy-label">须知</text>
                <text class="policy-content">周一至周日可用，包间不可用</text>
                <u-icon name="arrow-right" size="12" color="#909399"></u-icon>
            </view>
            <view class="policy-item">
                <text class="policy-label">保障</text>
                <text class="policy-content">随时退，过期自动退</text>
                <u-icon name="arrow-right" size="12" color="#909399"></u-icon>
            </view>
        </view>

        <!-- 团购详情 -->
        <view class="detail-section">
            <view class="detail-header">
                <text class="detail-title">团购详情</text>
                <u-icon name="question-circle" size="16" color="#909399"></u-icon>
            </view>
        </view>

        <!-- 精品肉类菜单 -->
        <view class="menu-section">
            <view class="menu-category">
                <text class="category-title">精品肉类</text>
            </view>

            <view v-for="(dish, index) in meatDishes" :key="index" class="dish-item">
                <view class="dish-info">
                    <view class="dish-name-container">
                        <text class="dish-name">{{ dish.name }}</text>
                        <view v-if="dish.tags" class="dish-tags">
                            <text v-for="(tag, tagIndex) in dish.tags" :key="tagIndex" class="dish-tag" :class="{
                                'top-tag': tag.includes('TOP'),
                                'recommend-tag': tag.includes('招牌')
                            }">{{ tag }}</text>
                        </view>
                    </view>
                    <u-icon name="arrow-right" size="12" color="#909399"></u-icon>
                </view>
                <view class="dish-details">
                    <text class="dish-portion">({{ dish.portion }})</text>
                    <text class="dish-price">¥{{ dish.price }}</text>
                </view>
            </view>

            <!-- 精品配菜 -->
            <view class="menu-category">
                <text class="category-title">精品配菜（可续加）</text>
            </view>

            <view v-for="(dish, index) in sideDishes" :key="index" class="dish-item">
                <view class="dish-info">
                    <view class="dish-name-container">
                        <text class="dish-name">{{ dish.name }}</text>
                        <view v-if="dish.tags" class="dish-tags">
                            <text v-for="(tag, tagIndex) in dish.tags" :key="tagIndex" class="dish-tag" :class="{
                                'top-tag': tag.includes('TOP'),
                                'recommend-tag': tag.includes('招牌')
                            }">{{ tag }}</text>
                        </view>
                    </view>
                    <u-icon name="arrow-right" size="12" color="#909399"></u-icon>
                </view>
                <view class="dish-details">
                    <text class="dish-portion">({{ dish.portion }})</text>
                    <text class="dish-price">¥{{ dish.price }}</text>
                </view>
            </view>

            <!-- 醋料 -->
            <view class="dish-item">
                <view class="dish-info">
                    <text class="dish-name">醋料</text>
                </view>
                <view class="dish-details">
                    <text class="dish-portion">(1份)</text>
                    <text class="dish-price">¥12</text>
                </view>
            </view>

            <!-- 招牌炸物 -->
            <view class="menu-category">
                <text class="category-title">招牌炸物</text>
            </view>

            <view class="dish-item">
                <view class="dish-info">
                    <text class="dish-name">韩式炸鸡块</text>
                    <u-icon name="arrow-right" size="12" color="#909399"></u-icon>
                </view>
                <view class="dish-details">
                    <text class="dish-portion">(1份)</text>
                    <text class="dish-price">¥45</text>
                </view>
            </view>

            <!-- 精品小菜 -->
            <view class="menu-category">
                <text class="category-title">精品小菜</text>
            </view>

            <view class="dish-item">
                <view class="dish-info">
                    <text class="dish-name">秘制鱼皮</text>
                    <u-icon name="arrow-right" size="12" color="#909399"></u-icon>
                </view>
                <view class="dish-details">
                    <text class="dish-portion">(1份)</text>
                    <text class="dish-price">¥18</text>
                </view>
            </view>
        </view>

        		<!-- 底部购买按钮 -->
		<view class="bottom-actions">
			<view class="buy-btn" @click="buyNow">
				<text>抢购</text>
				<text class="buy-price">折后 ¥{{ currentMeal.currentPrice }}</text>
			</view>
		</view>

		<!-- 订单确认弹窗 -->
		<order-confirm-popup
			:show="showOrderPopup"
			:order-data="selectedMeal"
			:initial-quantity="orderQuantity"
			:voucher-discount="4"
			@close="closeOrderPopup"
			@quantity-change="handleQuantityChange"
			@wechat-pay="handleWechatPay"
			@submit-order="handleSubmitOrder">
		</order-confirm-popup>
	</view>
</template>

<script>
import OrderConfirmPopup from '@/components/order-confirm-popup.vue'

export default {
	components: {
		OrderConfirmPopup
	},
    	data() {
		return {
			statusBarHeight: 0,
			isFavorite: false,
			selectedMealIndex: 0,
			showOrderPopup: false,
			orderQuantity: 1,
			selectedMeal: {},
            mealOptions: [
                { name: '239元3-4人餐' },
                { name: '155元双人餐' },
                { name: '147元2-3人餐' }
            ],
            mealDetails: [
                {
                    image: '/static/temp/banner2.jpg',
                    currentPrice: 239,
                    originalPrice: 434,
                    discount: 186,
                    voucher: 5,
                    finalDiscount: 4,
                    godVoucher: 4,
                    limitedDiscount: 5
                },
                {
                    image: '/static/temp/banner3.jpg',
                    currentPrice: 155,
                    originalPrice: 300,
                    discount: 120,
                    voucher: 5,
                    finalDiscount: 4,
                    godVoucher: 4,
                    limitedDiscount: 5
                },
                {
                    image: '/static/temp/banner4.jpg',
                    currentPrice: 147,
                    originalPrice: 280,
                    discount: 110,
                    voucher: 5,
                    finalDiscount: 4,
                    godVoucher: 4,
                    limitedDiscount: 5
                }
            ],
            meatDishes: [
                { name: '牛肋条', portion: '1份', price: 55 },
                { name: '必点秘制牛五花', portion: '1份', price: 45, tags: ['网友推荐 TOP3', '商家招牌'] },
                { name: '五花肉', portion: '1份', price: 45, tags: ['网友推荐 TOP2', '商家招牌'] },
                { name: '牛板腱', portion: '1标准', price: 78 }
            ],
            sideDishes: [
                { name: '生菜', portion: '1份', price: 30 },
                { name: '泡菜', portion: '1份', price: 10 },
                { name: '土豆泥', portion: '1份', price: 10, tags: ['网友推荐 TOP1', '商家招牌'] },
                { name: '白萝卜', portion: '1份', price: 10, tags: ['网友推荐 TOP4', '商家招牌'] }
            ]
        }
    },
    onLoad(option) {
        // 获取状态栏高度
        const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight;

        if (option.mealId) {
            this.loadMealDetail(option.mealId);
        }
        if (option.title) {
            // 可以根据传递的标题更新页面信息
            console.log('套餐标题:', option.title);
        }
    },
    computed: {
        currentMeal() {
            return this.mealDetails[this.selectedMealIndex];
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },

        toggleFavorite() {
            this.isFavorite = !this.isFavorite;
            uni.showToast({
                title: this.isFavorite ? '已收藏' : '已取消收藏',
                icon: 'none'
            });
        },

        shareContent() {
            uni.showToast({
                title: '分享功能',
                icon: 'none'
            });
        },

        selectMeal(index) {
            this.selectedMealIndex = index;
            uni.vibrateShort();
        },

        		buyNow() {
			// 准备选中的套餐数据
			this.selectedMeal = {
				id: this.selectedMealIndex + 1,
				title: `聚客推荐 ${this.mealOptions[this.selectedMealIndex].name}套餐`,
				image: this.currentMeal.image,
				tags: ['全周可用', '免预约', '随时退'],
				currentPrice: this.currentMeal.currentPrice,
				originalPrice: this.currentMeal.originalPrice
			};
			this.orderQuantity = 1;
			this.showOrderPopup = true;
		},

		// 关闭订单弹窗
		closeOrderPopup() {
			this.showOrderPopup = false;
		},

		// 处理数量变化
		handleQuantityChange(quantity) {
			this.orderQuantity = quantity;
		},

		// 处理微信支付
		handleWechatPay(orderInfo) {
			uni.showToast({
				title: '微信支付功能',
				icon: 'none'
			});
			console.log('微信支付订单信息:', orderInfo);
		},

		// 处理订单提交
		handleSubmitOrder(orderInfo) {
			uni.showToast({
				title: '订单提交成功',
				icon: 'success'
			});
			console.log('提交订单信息:', orderInfo);
			this.showOrderPopup = false;
		},

        loadMealDetail(mealId) {
            // 根据mealId加载套餐详情
            console.log('加载套餐详情:', mealId);
            // 这里可以调用API获取套餐详情数据
        }
    }
}
</script>

<style lang="scss" scoped>
.header-swiper {
    position: relative;

    .meal-image {
        width: 100%;
        height: 400upx;
        border-radius: 16upx;
    }

    .back-btn {
        position: absolute;
        top: 60upx;
        left: 30upx;
        width: 64upx;
        height: 64upx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }
}

.meal-detail-page {
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 120upx;
}

/* 套餐图片 */
.meal-image-container {
    background: #fff;
    padding: 20upx 30upx 0;

    .meal-image {
        width: 100%;
        height: 400upx;
        border-radius: 16upx;
    }
}

/* 价格信息 */
.price-section {
    background: #fff;
    padding: 20upx 30upx;

    .price-info {
        .price-header {
            display: flex;
            align-items: center;
            margin-bottom: 16upx;

            .current-price {
                font-size: 48upx;
                font-weight: 700;
                color: #fa436a;
                margin-right: 20upx;
            }

            .price-comparison {
                display: flex;
                align-items: center;
                gap: 8upx;
                font-size: 24upx;

                .equal-text,
                .minus-text {
                    color: #303133;
                    font-weight: 500;
                }

                .original-price {
                    color: #303133;
                    font-weight: 600;
                }

                .discount-amount {
                    color: #fa436a;
                    font-weight: 600;
                }

                .voucher-amount {
                    color: #52c41a;
                    font-weight: 600;
                }

                .final-voucher {
                    color: #fa436a;
                    font-weight: 600;
                }
            }
        }

        .discount-tags {
            display: flex;
            align-items: center;
            gap: 12upx;

            .discount-tag {
                color: #fff;
                font-size: 22upx;
                padding: 6upx 12upx;
                border-radius: 8upx;
                font-weight: 600;

                &.god {
                    background: linear-gradient(135deg, #fa436a, #ff6b7a);
                }

                &.limited {
                    background: linear-gradient(135deg, #52c41a, #73d13d);
                }
            }

            .all-discounts {
                color: #fa436a;
                font-size: 24upx;
                font-weight: 500;
                margin-left: auto;
            }
        }
    }
}

/* 限制说明 */
.restriction-info {
    background: #fff;
    padding: 0 30upx 20upx;

    .restriction-item {
        display: flex;
        align-items: center;
        padding: 16upx 20upx;
        background: #fff2e8;
        border-radius: 12upx;
        gap: 8upx;

        text {
            color: #fa436a;
            font-size: 24upx;
            flex: 1;
        }
    }
}

/* 套餐标题 */
.meal-title {
    background: #fff;
    padding: 20upx 30upx;
    margin-top: 20upx;

    .title-text {
        font-size: 32upx;
        font-weight: 600;
        color: #303133;
        line-height: 1.5;
    }
}

/* 评价信息 */
.rating-section {
    background: #fff;
    padding: 0 30upx 20upx;

    .rating-info {
        display: flex;
        align-items: center;
        gap: 8upx;
        margin-bottom: 8upx;

        .rating-text {
            color: #52c41a;
            font-size: 26upx;
            font-weight: 600;
            margin-right: auto;
        }
    }

    .additional-info {
        .info-text {
            color: #909399;
            font-size: 24upx;
        }
    }
}

/* 政策信息 */
.policy-section {
    background: #fff;
    padding: 20upx 30upx;
    margin-top: 20upx;

    .policy-item {
        display: flex;
        align-items: center;
        padding: 16upx 0;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
            border-bottom: none;
        }

        .policy-label {
            width: 80upx;
            font-size: 26upx;
            color: #606266;
            font-weight: 500;
        }

        .policy-content {
            flex: 1;
            font-size: 26upx;
            color: #303133;
            margin-left: 20upx;
        }
    }
}

/* 详情标题 */
.detail-section {
    background: #fff;
    padding: 20upx 30upx;
    margin-top: 20upx;

    .detail-header {
        display: flex;
        align-items: center;
        gap: 8upx;

        .detail-title {
            font-size: 32upx;
            font-weight: 600;
            color: #303133;
        }
    }
}

/* 菜单区域 */
.menu-section {
    background: #fff;
    padding: 0 30upx 20upx;

    .menu-category {
        padding: 24upx 0 16upx;

        .category-title {
            font-size: 30upx;
            font-weight: 600;
            color: #303133;
        }
    }

    .dish-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16upx 0;
        border-bottom: 1px solid #f8f9fa;

        &:last-child {
            border-bottom: none;
        }

        .dish-info {
            display: flex;
            align-items: center;
            gap: 8upx;
            flex: 1;

            .dish-name-container {
                flex: 1;

                .dish-name {
                    font-size: 28upx;
                    color: #303133;
                    margin-bottom: 4upx;
                }

                .dish-tags {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 6upx;
                    margin-top: 4upx;

                    .dish-tag {
                        font-size: 20upx;
                        padding: 2upx 8upx;
                        border-radius: 6upx;
                        font-weight: 500;

                        &.top-tag {
                            background: #fff2e8;
                            color: #fa8c16;
                        }

                        &.recommend-tag {
                            background: #f6ffed;
                            color: #52c41a;
                        }
                    }
                }
            }
        }

        .dish-details {
            display: flex;
            align-items: center;
            gap: 16upx;

            .dish-portion {
                font-size: 24upx;
                color: #909399;
            }

            .dish-price {
                font-size: 28upx;
                font-weight: 600;
                color: #303133;
            }
        }
    }
}

/* 底部按钮 */
.bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20upx 30upx;
    display: flex;
    gap: 20upx;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 -4upx 12upx rgba(0, 0, 0, 0.1);

    .buy-btn {
        flex: 2;
        background: linear-gradient(135deg, #fa436a, #ff6b7a);
        color: #fff;
        padding: 20upx;
        border-radius: 24upx;
        text-align: center;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        gap: 4upx;
        transition: all 0.3s ease;

        &:active {
            transform: scale(0.98);
        }

        text:first-child {
            font-size: 28upx;
        }

        .buy-price {
            font-size: 24upx;
            opacity: 0.9;
        }
    }
}
</style>
